<!DOCTYPE html>
<html>

<head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    <title>愿为你上天揽月，下五洋捉鳖</title>
    <link rel=stylesheet href=https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css>
    <script src="./js/weui.min.js"></script>
    <script src="./js/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PHbkXyvnkL86CXVDRueLv0GN"></script>
    <style>
        body,
        html {
            height: 100%;
        }

        body {
            font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif
        }
    </style>
</head>

<body ontouchstart>
    <div id="allmap" style="display: block"></div>
    <div id="page1">
        <p style="font-size: 14px;color: #565656;text-align: center;margin: 30px 0;">晴儿妹子，我留意你很久了~</p>
        <h3 style="text-align: center;">做我女朋友好不好?</h3>
        <div style="text-align: center;margin-top: 20px;">
            <img src="./img/liaoni.png">
        </div>
        <div class="weui-btn-area">
            <a id="yesBtn" onclick="yesFun()" href="javascript:" class="weui-btn weui-btn_primary">好</a>
        </div>
        <div class="weui-btn-area" style="margin-bottom: 15px;">
            <a id="noBtn" onclick="noFun()" href="javascript:" style="background-color:#d84747; " class="weui-btn weui-btn_primary">不好</a>
        </div>
    </div>
    <div id="page2" style="display: none;">
        <div style="text-align: center;margin-top: 30px;margin-bottom: 20px;">
            <img src="./img/tw.gif" style="width: 100px;">
            <img src="./img/tw.gif" style="width: 100px;position: relative;top: 20px;">
            <img src="./img/tw.gif" style="width: 100px;">
        </div>
        <p style="text-align: center;width: 80%;margin: auto;">有一天，我们一起起床，一起刷牙，一起拉着手出家门。一起遛狗，一起散步，一起为了争电视斗智斗勇。一起买菜，一起做饭，一起为了几毛钱在菜市场咆哮。我知道，一定会有这么一天的。</p>
        <audio id="bgMusic" src="./mp3/最美情侣-白小白.mp3" loop="true" hidden="true" controls="controls">
        </audio>
    </div>
    <div id="page3" style="display: none;">
        <h3 style="text-align: center;margin-bottom: 15px;margin-top: 100px;">开玩笑，这辈子缠上你了，这辈子都不会放过你了，我才不会那么容易放弃呢！！！</p>
            <a id="changeBtn" onclick="changeFun()" href="javascript:" style="width: 200px;display: none;margin-top: 15px;" class="weui-btn weui-btn weui-btn_primary">我想再重新选择一下</a>
    </div>
    <script type="text/javascript" src="example.js"></script>
</body>

</html>
<script>
    var address = "";
    var issueArray = [
        '小姐姐，网恋吗?'
    ];
    var countIndex = 0;
    async function myConfirm (text, yesLabel, noLabel) {
        return new Promise(function(resolve,reject){
            weui.confirm(text, {
            buttons: [{
                label: noLabel ? noLabel : '不好',
                type: 'default',
                onClick: function () { setTimeout(function () { resolve(false) }, 500); }
            }, {
                label: yesLabel ? yesLabel : '好',
                type: 'primary',
                onClick: function () { setTimeout(function () { reject(true) }, 500) }
            }]
        });
        });
        
    }
    function showPage2(text) {
        var audio = document.getElementById("bgMusic");
        audio.play();
        alert(text);
        document.getElementById("page2").style.display = "block";
        document.getElementById("page1").style.display = "none";
        jQuery.post("http://121.42.229.169:8080/api/receive", { msg: "在" + text + "点了好" }, function (data, status, xhr) {
            console.log(data);
        })
    }
    function yesFun() {
        showPage2("天啦，这是真的吗？真的答应做我女朋友吗？好开心啊");
    }
    function noFun() {
        showAlert();
    }

    async function showAlert() {
        if(countIndex==issueArray.length) {
            alert('哎呀呀，这么努力都不答应。心好痛。┭┮﹏┭┮');
            return;
        }
        let res = await myConfirm(issueArray[countIndex]);
        if(res){
            countIndex++;
            yesFun();
        }else{
            countIndex++;
            noFun();
        }
    }
    function changeFun() {
        document.getElementById("page1").style.display = "block";
        document.getElementById("page2").style.display = "none";
        document.getElementById("page3").style.display = "none";
    }
    window.onload = function () {
        
    }
</script>